<template>
  <div id="StorageConfirm">
    <div>
      <!-- 用来条件查询的 -->
      <h1 align="left">按条件查询</h1>
      <el-form :inline="true" :model="formInline" >
        <el-form-item label="填报时间">
          <el-form-item prop="date1">
            <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.date1" ></el-date-picker>
          </el-form-item>
          <el-form-item prop="date2">
            <el-time-picker placeholder="选择时间" v-model="ruleForm.date2" ></el-time-picker>
          </el-form-item>

        </el-form-item>
        <el-form-item label="班次" prop="region">
          <el-select v-model="ruleForm.region" placeholder="请选择查询班次">
            <el-option label="白班" value="baiban"></el-option>
            <el-option label="夜班" value="yeban"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')">搜索</el-button>
          <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <h1>生球物理指标检验记录</h1>
    <el-table
        :data="tableData_shengqiu"
        border>
      <el-table-column
          fixed
          prop="tianbaoshijian"
          label="填报时间"
          width="150">
      </el-table-column>
      <el-table-column
          prop="cishu"
          label="次数"
          width="120">
      </el-table-column>
      <el-table-column
          prop="lidu"
          label="粒度"
          width="120">
      </el-table-column>
      <el-table-column
          prop="chengqiulv"
          label="成球率"
          width="120">
      </el-table-column>
      <el-table-column
          prop="shengqiushuifen"
          label="生球水分"
          width="120">
      </el-table-column>
      <el-table-column
          prop="kangyaqiangdu"
          label="抗压强度/N"
          width="120">
      </el-table-column>
      <el-table-column
          prop="luoxiaqiangdu"
          label="落下强度/N"
          width="120">
      </el-table-column>
      <el-table-column
          label="操作"
          width="120">
        <template slot-scope="scope">
          <el-button @click="edit(scope.row)" type="text" size="small">修改</el-button>
          <el-button @click="delete_user(scope.row)" type="text" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
        background
        layout="prev, pager, next"
        :page-size="size"
        :total="total"
        @current-change="page">
    </el-pagination>

    <h1>料仓吨位表</h1>
    <el-table
        :data="tableData_dunwei"
        border
    >
      <el-table-column
          prop="jingkuang1"
          label="精矿1"
          width="100">
      </el-table-column>
      <el-table-column
          prop="jingkuang2"
          label="精矿2"
          width="100">
      </el-table-column>
      <el-table-column
          prop="jingkuang3"
          label="精矿3"
          width="100">
      </el-table-column>
      <el-table-column
          prop="jingkuang4"
          label="精矿4"
          width="100">
      </el-table-column>
      <el-table-column
          prop="jingkuang5"
          label="精矿5"
          width="100">
      </el-table-column>
      <el-table-column
          prop="jingkuang6"
          label="精矿6"
          width="100">
      </el-table-column>
      <el-table-column
          prop="pengruntu1"
          label="膨润土1"
          width="100">
      </el-table-column>
      <el-table-column
          prop="pengruntu2"
          label="膨润土2"
          width="100">
      </el-table-column>
      <el-table-column
          prop="rongji"
          label="溶剂"
          width="100">
      </el-table-column>
      <el-table-column
          prop="hui"
          label="灰"
          width="100">
      </el-table-column>

    </el-table>


  </div>
</template>

<script>
export default {
  created() {
    //TODO 传回的角色信息是id还是直接传回字符串？跟学姐再商量一下
    // 传回的是ID

    this.tableData_shengqiu = [
      {
        tianbaoshijian:"2019-6-19 18:27:11",
        cishu:1,
        lidu:12.5,
        chengqiulv:82,
        shengqiushuifen:9.8,
        kangyaqiangdu:12.3,
        luoxiaqiangdu:4.4
      },
      {
        tianbaoshijian:"2019-6-26 20:46:34",
        cishu:2,
        lidu:12.8,
        chengqiulv:85,
        shengqiushuifen:9.6,
        kangyaqiangdu:12.5,
        luoxiaqiangdu:4.7
      },{
        tianbaoshijian:"2019-6-26 23:10:47",
        cishu:3,
        lidu:12.4,
        chengqiulv:83,
        shengqiushuifen:9.4,
        kangyaqiangdu:12.2,
        luoxiaqiangdu:4.3
      },{
        tianbaoshijian:"2019-6-19 18:27:11",
        cishu:4,
        lidu:12.6,
        chengqiulv:80,
        shengqiushuifen:9.7,
        kangyaqiangdu:12.4,
        luoxiaqiangdu:4.2
      },
    ]

    this.tableData_dunwei=[
      {
        jingkuang1:690.78,
        jingkuang2:658.44,
        jingkuang3:697.73,
        jingkuang4:614.72,
        jingkuang5:591.54,
        jingkuang6:681.48,
        pengruntu1:250,
        pengruntu2:222.79,
        rongji:97.38,
        hui:217.31
      }
    ]
    // TODO 所有的请求的baseURL还没有改（还没有加）

  },
  data() {
    return {
      ruleForm: {
        date1:'',
        date2:'',
        banci:''
      },
      total: null,
      tableData_shengqiu: null,
      size: null
    }
  },
  methods: {
    submitForm(formName) {
      const _this = this
      this.$refs[formName].validate((valid) => {
        if (valid) {
          axios.post('/user/list', {
            pageNum: 1,
            pageSize: 6,
            username: _this.ruleForm.username,
            phoneNumber: _this.ruleForm.phoneNumber,
            email: _this.ruleForm.email,
            idNum: _this.ruleForm.idNum
          }).then(function (resp) {
            _this.tableData = resp.data;
            _this.total = resp.data.totalElements
            _this.size = resp.data.pageable.pageSize
          })
        } else {
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    edit(row) {
      this.$router.push({
        path: '/userUpdate',
        query: {
          userId: row.userId
        }
      })
    },
    delete_user(row) {
      const _this = this;
      axios.delete("/user/delete" + row.userId).then(function (resp) {
        _this.$alert(row.userId + "删除成功！", "删除成功", {
          confirmButtonText: '确定',
          callback: action => {
            window.location.reload()
          }
        })
      })
    },
    page(currentPage) {
      const _this = this
      // axios.get('/' + currentPage + '/6').then(function (resp) {
      //   _this.tableData = resp.data.content
      //   _this.total = resp.data.totalElements
      //   _this.size = resp.data.pageable.pageSize
      // })
      var form = {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        username: _this.ruleForm.username,
        phoneNumber: _this.ruleForm.phoneNumber,
        email: _this.ruleForm.email,
        idNum: _this.ruleForm.idNum
      }
      axios.post('/user/list', form).then(function (resp) {
        _this.tableData = resp.data.content
        _this.total = resp.data.totalElements
        _this.size = resp.data.pageable.pageSize
      })
    }
  }
}
</script>

<style scoped>
.el-form{
  font-family: 思源宋体;
}
.el-form-item{
  width: max-content;
}
.el-table{
  width: min-content;
  font-family: 思源宋体;
}
</style>